<template>
  <div>
    <!-- <searchHeader/> -->
    <main class="recomContent" >
      <div class="authorAndcomment" v-for="(recom,a) in recommendList" :key="a" @click="tabXiao">
          <!-- 发表者 -->
            <div class="userPublish">
              <p v-text="recom.title"></p>
            </div>
          <!-- 内容 -->
            <div class="authorAllcontent">
              <p v-text="recom.summary" class="authorPublish"></p>
              <p class="authNam">
                  <span v-text="recom.author"></span>
                  <span class="fa fa-eye" aria-hidden="true"></span>
                  <span v-text="recom.hits"></span>
                  
              </p>
            </div>
            <img class="authorBackgrondImg" :src="recom.banner" >
      </div>
    </main>
  </div>
</template>
<script>
import { Popup } from "vux";
export default {
  data() {
    return {
      recommendList: [],
      isShow: false,
      status: "loading",
      loadingMore: false
    };
  },
  components: {
    Popup
  },
  mounted() {
    this.getRecommendInfo();
  },
  methods: {
    getRecommendInfo: function() {
      var _this = this;
      this.$http
        .get(
          "/judou/api/v6/op/channels/14?page=1&per_page=20&token=edd704412ee957bc1594c902f172b9c8&timestamp=1545183319&app_key=2a438661-92c0-4a2d-b32e-3fd0c47a0a3c&platform=android&channel=ch_xiaomi&version_code=484&version=v3.7.2&system_version=27&device_type=MI%208&device_id=d317466bdcb13faa&signature=c9a5047b20c60604069b22dce3c644cd"
        )
        .then(function(value) {
          _this.recommendList = value.body.data;
          // console.log(_this.recommendList);
        });
    },
    copyClick: function() {
      console.log(123123);
      this.isShow = !this.isShow;
    },
    cancel: function() {
      this.isShow = false;
    },
    copyText: function() {
      this.isShow = false;
      alert("复制成功");
    },
    tabXiao:function(){
      $('.weui-tabbar').hide()
    }
  }
};
</script>

<style scoped>
a:-webkit-any-link{
  text-decoration: none;
  color: black;
}
.recomContent {
  height: 1000vw;
  position: relative;
  overflow-y: auto;
}
.authorAndcomment {
  width: 98vw;
  border-top: 3vw solid rgb(248, 247, 243);
  padding: 3% 0; 
  line-height: 6vw;
}
.authorAllcontent {
  padding: 2vw;
}
.authorPublish {
  width: 96vw;
  font-size: 3.5vw;
  color: rgb(214, 208, 208);
}
.authorBackgrondImg {
  margin-left: 2vw;
  width: 96vw;
  height: 40vw;
  border-radius: 2vw;
}
.userPublish{
    /* border: 1px solid black; */
    margin: 0 3%;
    font-size: 4.5vw;
}
.authNam{
    font-size: 3vw;
    color: rgb(122, 115, 115);
}
.authNam span:nth-child(1){
    color: rgb(236, 193, 83);
}
.authNam span:nth-child(2){
    margin-left: 3vw;
}
</style>
